<template>
  <div class="aside-wrap">
    <div class="aside-logo" ref="asideLogo">
      <div style="width: 287px; height: 280px"></div>
      <a href="#" title="三牛" id="logo">
        <img  :class="{ shake1: isAnimate }" src="../assets/images/logo.svg" alt="三牛" />
      </a>
      <ul class="aside-social">
        <li>
          <img
            v-if="selectContact ==1"
            @mouseover="showcontact(1)"
            @mouseout="hidecontact(1)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 1 }"
            src="../assets/images/weixin_yes.png"
            alt=""
            srcset=""
          />
           <img
            v-else
            @mouseover="showcontact(1)"
            @mouseout="hidecontact(1)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 1 }"
            src="../assets/images/weixin_no.png"
            alt=""
            srcset=""
          />
        </li>
        <li>
          <img
            v-if="selectContact ==2"
            @mouseover="showcontact(2)"
            @mouseout="hidecontact(2)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 2 }"
            src="../assets/images/qq_yes.png"
            alt=""
            srcset=""
          />
            <img
            v-else
            @mouseover="showcontact(2)"
            @mouseout="hidecontact(2)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 2 }"
            src="../assets/images/qq_no.png"
            alt=""
            srcset=""
          />
        </li>
        <li>
          <img
             v-if="selectContact ==3"
            @mouseover="showcontact(3)"
            @mouseout="hidecontact(3)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 3 }"
            src="../assets/images/phone_yes.png"
            alt=""
            srcset=""
          />
           <img
            v-else
            @mouseover="showcontact(3)"
            @mouseout="hidecontact(3)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 3 }"
            src="../assets/images/phone_no.png"
            alt=""
            srcset=""
          />
        </li>
        <li>
         <img
            v-if="selectContact ==4"
            @mouseover="showcontact(4)"
            @mouseout="hidecontact(4)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 4 }"
            src="../assets/images/email_yes.png"
            alt=""
            srcset=""
          />
          <img
            v-else
            @mouseover="showcontact(4)"
            @mouseout="hidecontact(4)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 4 }"
            src="../assets/images/email_no.png"
            alt=""
            srcset=""
          />
        </li>
        <li>
            
          <img
            v-if="selectContact == 5"
            @mouseover="showcontact(5)"
            @mouseout="hidecontact(5)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 5 }"
            src="../assets/images/dingwei_yes.png"
            alt=""
            srcset=""
          />
           <img
            v-else
            @mouseover="showcontact(5)"
            @mouseout="hidecontact(5)"
            class="contacticon"
            :class="{ contacticon_active: selectContact == 5 }"
            src="../assets/images/dingwei_no.png"
            alt=""
            srcset=""
          />
        </li>
      </ul>
    </div>

    <div class="aside-popular-projects">
      <!-- <span>Popular projects</span> -->
      <span>联系方式：</span>
      <div>
        <div v-if="selectContact == 1" class="contactdetail">
          <img class="qrcodeimg" :src="wximg" alt="" srcset="" />
        </div>
        <div v-if="selectContact == 2" class="contactdetail">
          <img class="qrcodeimg" :src="qqimg" alt="" srcset="" />
          <div>
            <img src="../assets/images/QQ2.png" style="width:30px;float:left" alt="" srcset="">
            <a href="tencent://message/?uin=1450270508&Site=&Menu=yes" id="gochartqq">立即咨询客服</a> 

          </div>
        </div>
        <div v-if="selectContact == 3" class="contactdetail">
          <div class="contract_phone">客服经理电话:+86{{ phone }}</div>
        </div>
        <div v-if="selectContact == 4" class="contactdetail">
          <div class="contract_email">经理邮箱:{{ email }}</div>
        </div>
        <div v-if="selectContact == 5" class="contactdetail">
          <baidu-map id="allmap" @ready="mapReady"> </baidu-map>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSideSection, getSidePlate, getInfo } from "../http/api";
import emitter from "../utils/eventbus";

export default {
  data() {
    return {
      url: "",
      isAnimate: false,
      selectContact: 1,
      scrolltopTemp:
        document.documentElement.scrollTop || document.body.scrollTop,
      image: localStorage.getItem("company_image") || "",
      contactway: {},
      firstImg: "",
      secondImg: "",
      phone: "",
      wximg:"",
      qqimg:"",
      email: "",
      x:0,
      y:0,
      BMap:{},
      map:{}
    };
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll); // 监听（绑定）滚轮滚动事件
    });

    this.init();
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    mapReady({ BMap, map }) {
      // 选择一个经纬度作为中心点
      console.log(map)
      this.map = map;
      this.BMap = BMap;
      let that = this;

      var point = new BMap.Point(113.255705,23.187941);
      map.centerAndZoom(point, 15);
      var icon = new BMap.Icon("./static/images/locate.png",new BMap.Size(50,50)); 
      var marker = new BMap.Marker(new BMap.Point(113.255705,23.187941),{icon:icon}); 
      map.addOverlay(marker);

      // setTimeout(function (){
      //   var point = new BMap.Point(this.x,this.y);
      //   that.map.centerAndZoom(point, 15);
      //   var icon = new BMap.Icon("../assets/images/locate.png",new BMap.Size(100,100)); 
      //   var marker = new BMap.Marker(new BMap.Point(this.x,this.y),{icon:icon}); 
      //   that.map.addOverlay(marker);
      // },3000 )
    
    },
    hidecontact(contact_type) {
      // this.selectContact = 1;
    },
    showcontact(contact_type) {
      this.selectContact = contact_type;
    },
    handleScroll() {
      let scrollHeight =
        document.documentElement.scrollTop || document.body.scrollTop; //滚动高度
      if (scrollHeight > 120) {
        this.isAnimate = true;
      } else {
        this.isAnimate = false;
      }
    },
    async init() {
      getInfo().then((res) => {
        if (res && res.data && res.data.code == 20000) {
          this.image = res.data.data.image;
          this.qqimg = res.data.data.qqimg;
          this.wximg = res.data.data.wximg;
          this.phone = res.data.data.phone;
          this.email = res.data.data.email;
          this.x = parseFloat(res.data.data.address.split(","[0]))
          this.y = parseFloat(res.data.data.address.split(","[1]))
          localStorage.setItem("company_image", res.data.data.image);
          localStorage.setItem("site_info",JSON.stringify(res.data.data))
        }
      });
    },

    toDetail(content) {
      emitter.emit("refleshDetail", { content: content });
      this.$router.push({
        path: "/detail",
        query: {
          content: content,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
#gochartqq {
  color:red;
  font-size: 30px; 
  line-height: 30px;
}
#allmap{
  width: 260px;
  height: 240px;
  padding: 10px;
}
.contactdetail { 
  width: 287px;
  border-bottom: 1px solid gray;
  min-height: 100px;
  transform-origin: 0 0 0;
  animation: contactanim 0.1s linear forwards;
}
@keyframes contactanim {
  from {
    transform: scale(0.8, 0.8);
  }
  to {
    transform: scale(1, 1);
  }
}
.qrcodeimg {
  width: 287px;
}
.contract_phone {
  font-size: 18px;
}
.contract_email {
  font-size: 18px;
}
/deep/ .el-carousel__container {
  width: 287px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/deep/ .el-carousel__item is-animating {
  width: 287px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body #logo {
  position: fixed;
  background: #fff;
  top: 0;
  width: 287px;
  padding: 20px 0;
  margin-bottom: 30px;
  background-color: #fff;
  border-bottom: 1px #666 solid;
  z-index: 99;
}
body #logo img {
  width: 100%;
  height: auto;
  max-width: 287px;
}
.aside-logo {
  width: 287px;
  display: flex;
  flex-direction: column;

  // div {
  a {
    background-color: #fff;
    /* position: fixed;
      right: 29px;
      top: 0;
      margin: 0 auto;
      border-bottom: 1px #666 solid;
      padding: 20px 0 40px 0; */
    width: 287px;
  }

  // }
  .aside-social {
    display: flex;
    justify-content: space-between;
    .contacticon {
      width: 40px;
      background-color: white;
    }
    .contacticon_active {
      background-color: rgb(235, 235, 235);
      border-radius: 3px;
      padding: 2px;
    }
    li a {
      padding: 0;
      font-size: 48px;
      color: #989898;
      border-bottom: 0px;
    }
  }
}
.aside-stat {
  width: 287px;
  display: flex;
  flex-direction: column;
  .aside-stat-wrap {
    // margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    p {
      margin: 10px 0 0 0;
    }
  }
  a {
    padding: 9px 10px;
    border: 1px solid #666;
    color: #333;
    margin: 0 0 10px;
    text-align: center;
  }
}
.aside-popular-projects {
  width: 287px;
  display: flex;
  flex-direction: column;
  span {
    padding: 10px;
    background-color: #4d4d4d;
    font-weight: 600;
    color: #fff;
  }
  .projects-img {
    width: 100%;
    height: 187px;
    img {
      width: 100%;
      height: auto;
      display: block;
    }
  }
  .projects-list {
    width: 100%;
    padding: 10px;
    background-color: #f2f2f2;
    box-sizing: border-box;

    .projects-list-item {
      width: 100%;
      display: flex;
      .title {
        color: #999;
        font-size: 18px;
      }
      span {
        background-color: #f2f2f2;
        color: #666;
        font-weight: 400;
        padding: 10px 0;
        font-size: 16px;
      }
      .content {
        border-bottom: 1px solid #cbcbcb;
        flex: 1;
        margin-left: 10px;
      }
      /*  hr {
        width: 90%;
        // margin-left: 20px;
        box-sizing: border-box;
        height: 1px;
        margin: 10px 0 10px 20px;
      } */
    }
    .projects-list-item:hover {
      cursor: pointer;
      span {
        color: #000;
      }
    }
  }
}

.calrousel_wrap {
  cursor: pointer;
  width: 286px; /* ***！*** */
  margin-top: 20px;
  box-sizing: border-box;
  span {
    font-weight: 600;
  }
  .el-carousel {
    margin-top: 20px;
  }
  .calrousel_img {
    width: 287px;
    height: 187px;
    background: #4d4d4d;
  }
  .calrousel_dec {
    padding: 15px;
    margin: 0;
    background-color: #4d4d4d;
    h4 {
      color: #fff;
      font-weight: normal;
      text-align: center;
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      // margin-top: 20px;
      color: #fff;
    }
  }
}

.shake1 {
  transform-origin: 0 0 0;
  animation: test1 0.15s linear forwards;
}
.shake2 {
  transform-origin: 0 0 0;
  animation: test2 0.15s linear forwards;
}
@keyframes test1 {
  from {
    transform: translate(0, 0) scale(1, 1);
  }
  25% {
    transform: scale(0.95, 0.95);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  75% {
    transform: scale(0.85, 0.85);
  }
  to {
    transform: scale(0.8, 0.8);
  }
}
@keyframes test2 {
  from {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.95, 0.95);
  }
  50% {
    transform: scale(0.9, 0.9);
  }
  75% {
    transform: scale(0.85, 0.85);
  }
  to {
    transform: scale(0.75, 0.85);
  }
}
</style>